<template>
  <div class="chat_view" :style="customStyle">
    <div v-for="message in chatList" :key="message.id">
      <Question :content="message.problem_text"></Question>
      <Answer :content="message.answer_text"></Answer>
    </div>
  </div>
</template>


<script>
import Question from './Question.vue';

import Answer from './Answer.vue';
export default {
  name: 'ChatView',

  components: {
    Question,
    Answer
  },

  props: {

    customStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },

    chatList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
    }
  }
}
</script>


<style scoped lang="scss">
.chat_view {
  // width: 100%;
  // height: 100%;

  padding: 16px;
  max-width: 700px;
  min-height: 500px;

  overflow-y: auto;

}
</style>
